<template>
  <div>
    <!-- 加载动画 -->
    <transition name="loader">
      <div v-show="loaderVisible">
        <slot name="loader"></slot>
      </div>
    </transition>
    <!-- 内容 -->
    <transition name="body">
      <div v-show="bodyVisible">
        <slot name="body"></slot>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loaderVisible: this.loading,
      bodyVisible: !this.loading
    };
  },
  watch: {
    loading(loading) {
      this.loaderVisible = loading;
      setTimeout(() => {
        this.bodyVisible = !loading;
      }, 300);
    }
  }
};
</script>
<style scoped>

</style>
